<!DOCTYPE html>
<html> 
	<head>
		<style type="text/css">
            #Navigation {
                display: table;
                table-layout: fixed;
                max-width: 200px;
            }
                #Navigation input {
                    display: table-cell;
                    margin-top: 10px;
                    width: 100%;
                }
            h3 {
                color: cornflowerblue;
            }
            #Help h4, p {
                margin-left: 10px;
            }
            #Help h4 {
                color: #32CD32;
            }
            #ValidationErrors li {
                list-style: square;
                margin: 0.5em;
            }
            #ValidationErrors h4 {
                display: inline;
                color: red;
            }
            #ValidationErrors span {
                display: inline;
                margin-left: 10px;
            }
	    </style>
		<script type="text/javascript">

            // Get a reference to the XDocument object for the InfoPath Form.
            var XDocument = window.external.Window.XDocument;

			function GenerateButtons(useFormatting)
			{
			    var Views = document.getElementById("Navigation");
			    var ViewInfos = XDocument.ViewInfos;
			    var ViewInfosArray = [];

                if (useFormatting) {
                    for (i = 0; i < ViewInfos.Count; i++) {
                        ViewInfosArray[i] = ViewInfos[i].Name;
                    }
                    ViewInfosArray.sort();
                }

                // Loop through each view in ViewInfos.
			    for (i = 0; i < ViewInfos.Count; i++)
			    {
					
				
			        var ViewId = "";
			        var ViewName = "";
			        
			        // Get the name of each view.
			        if (useFormatting) {
			            ViewId = ViewInfosArray[i];
			            ViewName = ViewId.substring(ViewId.lastIndexOf("_") + 1);
			        }
			        else {
			            ViewId = ViewInfos[i].Name;
			            ViewName = ViewId;
			        }

					// Ignore views prefixed with "@" if using formatting rules.
					if (useFormatting && ViewId.lastIndexOf("@", 0) === 0 ) {
						continue;
					}
					
			        // Create a new input element with the id and 
			        // value as the name of the view.
				    var Input = document.createElement("input");
				    Input.type = "button";
				    Input.id = ViewId;
				    Input.value = ViewName;
				    Input.onclick = SwitchView;
                    // Add the view to the Views div.
				    Views.appendChild(Input);
				}
			}

			function SwitchView() {
			    XDocument.View.SwitchView(this.id);
			}

			function ShowMessage(message) {
			    XDocument.UI.Alert(message);
			}

			function SetHelp(title, message) {
			    document.getElementById("HelpTitle").innerHTML = title;
			    if (title != "") {
			        document.getElementById("HelpTitle").style.display = "inline";
			    }
			    else {
			        document.getElementById("HelpTitle").style.display = "none";
			    }
			    document.getElementById("HelpMessage").innerHTML = message;
			}

			function ToggleVisibility(elementName, isVisible) {
			    if (isVisible) {
			        document.getElementById(elementName).style.display = "inline";
			    }
			    else {
			        document.getElementById(elementName).style.display = "none";
			    }
			}

			function SetMaxWidth(elementName, maxWidth) {
			    document.getElementById(elementName).style.maxWidth = maxWidth;
			}

			function AddError(title, message) {
			    var ErrorList = document.getElementById("ErrorList");
			    var TitleElement = document.createElement("h4")
			    TitleElement.innerHTML = title;
			    var MessageElement = document.createElement("span");
			    MessageElement.innerHTML = message;
			    var ErrorListItem = document.createElement("li");
			    ErrorListItem.appendChild(TitleElement);
			    ErrorListItem.appendChild(MessageElement);

			    ErrorList.appendChild(ErrorListItem);
			}

			function ClearErrors() {
			    document.getElementById("ErrorList").innerHTML = "";
			}
		</script>
	</head>
<body id="Body" style="display: none">
    <div id="Navigation">
        <h3>Navigation</h3>
    </div>
    <hr id="Rule1" />
    <div id="Help">
        <h3>Help</h3>
        <h4 id="HelpTitle">Help</h4>
        <p id="HelpMessage">Click anywhere on the form to see the help for that item.</p>
    </div>
    <hr id="Rule2"/>
    <div id="ValidationErrors">
        <h3>Validation Errors</h3>
        <ul id="ErrorList">
        </ul>
    </div>
</body>
</html>